import React, { useContext, useState } from "react";
import { View, Image } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";

import { CommonContext, setTabBar } from "../../store";
import api from "@api/api.js";

import yuyue from "@assets/workbench/yuyue.png";
import fangan from "@assets/workbench/fangan.png";
import hongbao from "@assets/workbench/hongbao.png";

import "./index.less";

export default () => {
  const [state, dispatch] = useContext(CommonContext);
  const [data, setData] = useState({});
  useDidShow(() => {
    dispatch(setTabBar("工作台"));
    workbench();
  });
  // 获取工作台数据
  const workbench = async () => {
    const { data, code } = await api.workbench();
    if (code == 200) {
      data.headimgurl =
        data.headimgurl.indexOf("https://") == -1
          ? api.bseUrl + data.headimgurl
          : data.headimgurl;
      setData(data);
    }
  };
  // 跳转方案页面
  const goPlan = () => {
    Taro.switchTab({ url: `/pages/plan/index` });
  };
  // 跳转红包页面
  const goRedPacket = () => {
    Taro.navigateTo({ url: `/pages/redPacket/index` });
  };
  // 跳转日程
  const goSchedule = () => {
    Taro.switchTab({ url: `/pages/schedule/index` });
  };
  return (
    <View className="bgBox">
      <View className="card">
        <View className="head">
          <Image src={data.headimgurl} />
        </View>
        <View className="time">
          {data.currentDate} {data.currentDayOfWeek}
        </View>
        <View className="name">{data.name}</View>
        <View className="desc">
          已入驻平台 <View>{data.currentDayOfJoin}</View> 天
        </View>
      </View>
      <View className="infos">
        <View className="info listBox" onClick={goSchedule}>
          <View className="icon">
            <Image src={yuyue} className="schedule" />
          </View>
          <View className="lable">当前预约</View>
          <View className="val">{data.currentSchedulesNums}</View>
        </View>
        <View className="info listBox" onClick={goPlan}>
          <View className="icon">
            <Image src={fangan} className="diag" />
          </View>
          <View className="lable">跟进中方案</View>
          <View className="val">{data.currentDiagNums}</View>
        </View>
        <View className="info listBox" onClick={goRedPacket}>
          <View className="icon">
            <Image src={hongbao} className="balance" />
          </View>
          <View className="lable">我的红包</View>
          <View className="val">￥{data.currentBalanceAmounts}</View>
        </View>
      </View>
    </View>
  );
};
